<template>
  <view class="project-details flex flex-col min-w-0 box-border">
    <scroll-view class="content" scroll-y>
      <u-swiper :list="bkiTopFileList" circular height="320rpx" indicator indicatorMode="line" width="100%" />

      <u-notice-bar :custom-style="{ flex: 'none' }" :text="projectDetails.bkiBoard" />

      <view>
        <MyCard :is-radius="false" class="mb-4">
          <view class="font-bold text-sm">{{ projectDetails.bkiSiteName }}</view>
          <view class="text-[#696975] text-xs mt-1">{{ projectDetails.bkiRule }}</view>

          <text class="text-orange-400">
            {{
              projectDetails.bkiMinPrice === projectDetails.bkiMaxPrice
                ? `￥${projectDetails.bkiMinPrice / 100}`
                : `￥${projectDetails.bkiMinPrice / 100}~${projectDetails.bkiMaxPrice / 100}`
            }}
          </text>
        </MyCard>
        <MyCard :is-radius="false" class="mb-4">
          <view class="font-bold text-xs mb-2">场馆信息</view>
          <view class="flex items-center justify-between">
            <view>
              <view class="font-bold text-xs mb-1">
                {{ projectDetails.bkiVenue }}
              </view>
              <view class="font-bold text-xs mb-1">
                <!--{{ mostFormattedDate(projectDetails.bkiToStartTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD') }}-{{-->
                <!--  mostFormattedDate(projectDetails.bkiToEndTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD')-->
                <!--}}-->
                <!--（{{ convertToHoursMinute(projectDetails.bkiStartTime) }} - -->
                <!--{{ convertToHoursMinute(projectDetails.bkiEndTime) }}）-->
              </view>
              <view class="text-gray-500 text-xs mt-1 line-clamp-2">中国车谷国际体育文化交流中心</view>
            </view>
            <view class="flex items-center justify-between">
              <view class="text-xs" @tap="toLocationPlace(projectDetails.bkiVenue)">
                <text class="material-icons text-amber-300 mr-8">location_on</text>
                <view>地图</view>
              </view>
              <view class="text-xs" @tap="makeCall(projectDetails.bkiPhone)">
                <text class="material-icons text-emerald-500">call</text>
                <view>电话</view>
              </view>
            </view>
          </view>
        </MyCard>

        <MyCard :is-radius="false" class="flex-1">
          <view class="flex flex-col">
            <view class="font-bold text-xs mb-2">场地详情</view>

            <view class="text-[#696975] text-xs mt-1 mb-2">{{ projectDetails.bkiNotice }}</view>

            <template v-if="bkiBottomFileList.length">
              <u-image
                v-for="(item, index) in bkiBottomFileList"
                :key="index"
                :fade="true"
                :src="item.path"
                duration="450"
                height="320rpx"
                width="100%"
              />
            </template>
            <u-empty v-else icon="http://cdn.uviewui.com/uview/empty/car.png" mode="car"></u-empty>
          </view>
        </MyCard>
      </view>
    </scroll-view>
    <view class="w-full p-2 fixed bottom-0">
      <u-button :custom-style="{ width: '100%' }" shape="circle" text="确认项目" type="primary" @click="routerPath" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import MyCard from '@/components/MyCard/MyCard.vue';
import { RequestInterface } from '@/typings/request';
import { inject } from 'vue';
import { SUBSCRIBE } from '@/api/subscribe';
import { PLACE_POINT } from '@/constants/base';
import { useSubscribeStore } from '@/stores/subscribe';
import { makeCall, toLocation } from '@/utils/common';

const subscribeStore = useSubscribeStore();
const $http: RequestInterface = inject('$http') as RequestInterface;

onLoad((query) => {
  const { id } = query;
  if (id) {
    getProjectDetails(id);
  }
});

const projectDetails = ref({});

// 获取项目详情
const getProjectDetails = (id) => {
  $http.post({
    url: SUBSCRIBE.RESERVATION_DETAILS,
    data: { id },
    success: (res) => {
      projectDetails.value = res;
      // 存储到pina
      subscribeStore.setProjectDetails(res);
    }
  });
};

// 头部文件上传
const bkiTopFileList = computed(() => {
  const newBkiFileTop = JSON.parse(projectDetails.value.bkiFileTop || '[]');
  return newBkiFileTop.map((item) => item.path);
});

// 底部文件上传
const bkiBottomFileList = computed(() => {
  return JSON.parse(projectDetails.value.bkiFileInfo || '[]');
});

// 场馆导航
const toLocationPlace = (name) => {
  toLocation({
    name, // 位置名字
    latitude: PLACE_POINT[name].lat, // 维度
    longitude: PLACE_POINT[name].lng, // 经度
    address: name // 地址详细说明
  });
};

// 跳转到预约场次
const routerPath = () => {
  uni.$u.route({
    url: '/pages/subscribe/bookingTime'
  });
};
</script>

<style lang="scss">
.project-details {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100rpx);

  .content {
    @apply flex-grow flex-1 p-2 basis-auto overflow-auto box-border flex flex-col;
  }
}
</style>
